<{include file="header.html"}>

<script type="text/javascript">
	var firstLoad = true;
	function validate()
	{
		var date = document.getElementById('DATE');
        var time = document.getElementById('TIME');
		var service = document.getElementById('SERVICE');
		var selectedID = "";
		$("#SERVICE option:selected").each(function () {
			var $this = $(this);
			if ($this.length) {
				var selText = $this.val();
				selectedID = selectedID + "" +  selText  + ",";
			}
		});
		if(selectedID == ""){
			showErrorBubble(null, '<{$smarty.const._MSG_BOOKING_INVALID_SERVICE|utf8_escape_js}>');
			return false;
		}
		if(date.value == ""){
			showErrorBubble(null, '<{$smarty.const._MSG_BOOKING_INVALID_DATE|utf8_escape_js}>');
			return false;
		}
		
		if(!$("input[type=radio][name='TIME']:checked").val()){
			showErrorBubble(null, '<{$smarty.const._MSG_BOOKING_INVALID_TIME|utf8_escape_js}>');
			return false;
		}
		document.user_form.submit();
	}
	function getAvailableTechnician(){
		var date = document.getElementById('DATE');
        var time = document.getElementById('TIME');
		var service = document.getElementById('SERVICE');
		var selectedID = "";
		$("#SERVICE option:selected").each(function () {
			var $this = $(this);
			if ($this.length) {
				var selText = $this.val();
				selectedID = selectedID + "" +  selText  + ",";
			}
		});
		if(date.value == "" || time.value == "" || selectedID == ""){
			return false;
		}
		var agr = new Array();
		agr.push(date.value);
		agr.push(time.value);
		agr.push(selectedID);
		
		var txt = callFunction('Technician::getAvailableTech',agr);
		
		$("#listTechnicial").html(txt);
	}
	function selectService(){
		var service = document.getElementById('SERVICE');
		var html = "";
		var selected = false;
		$("#SERVICE option:selected").each(function () {
			var $this = $(this);
			if ($this.length) {
				var selText = $this.text();
				html = html + "" +  selText  + "<br />";
				selected = true;
			}
		 });
		 $("#selectedService").html(html);
		 return selected;
	}
	function getWorkingHour(){
		var selectedID = "";
		$("#SERVICE option:selected").each(function () {
			var $this = $(this);
			if ($this.length) {
				var selText = $this.val();
				selectedID = selectedID + "" +  selText  + ",";
			}
		});
		var date = document.getElementById('DATE');
		var agr = new Array();
		agr.push(date.value);
		agr.push(selectedID);
		agr.push(<{$bookedID}>);
		agr.push('<{$bookedSerialize}>');
		var txt = callFunction('Booking::checkAvailableBooking',agr);
		$("#dTIME").html(txt);
		if(firstLoad){
			if(!$('input[type=radio][name="TIME"][value="<{$selectedTIME}>"]').prop('disabled')){
				$('input[type=radio][name="TIME"][value="<{$selectedTIME}>"]').prop('checked', true);
			}
			firstLoad = false;
		}
		$("#dTIME").buttonset("refresh");
	}
	
	var currentTab = 0;
	$(function () {
		$("#tabs").tabs({
			disabled: [1]
			
		});
		
		$("#btnSelectedService").click(function(){
			if(selectService()){
				var tabs = $('#tabs').tabs();
				tabs.tabs('enable',1);
				tabs.tabs('option','active', 1);
				tabs.tabs('disable', 0);
				if(firstLoad){
					getWorkingHour();
				}
			}
			else{
				showErrorBubble(null, "You must select at least one service");
			}
		});
		$("#btnBackService").click(function () {
			var tabs = $('#tabs').tabs();
			tabs.tabs('enable',0);
			tabs.tabs('option','active', 0);
			tabs.tabs('disable', 1);

		});
		$( "#datepicker" ).datepicker({
			altField: "#DATE",
			altFormat: "dd/mm/yy",
			minDate : new Date("<{$currentDATE|date_format:"%Y,%m,%d"}>"),
			defaultDate : new Date("<{$selectedDATE|date_format:"%Y,%m,%d"}>"),
			onSelect :function( selectedDate ) {
				getWorkingHour();
			},
		});
		$("#dTIME").buttonset();
	 });
</script>
<style >
#tabs .ui-widget-header { 
    background:#911F7E; 
    border: none; 
    border-bottom: 1px solid #c0c0c0; 
    -moz-border-radius: 0px; 
    -webkit-border-radius: 0px; 
    border-radius: 0px; 
}
#ApproveButtonLabel.ui-state-default {margin: 2px;}
#ApproveButtonLabel.ui-state-default span.ui-button-text {font-size: 12px; font-weight: normal;}
#ApproveButtonLabel.ui-state-active { background: #911F7E; }
#ApproveButtonLabel.ui-state-active span.ui-button-text { color: #FFF; font-size: 12px; }
</style>
<div id="content">
    <div class="container">
        <div class="main-content">
            <h1 class="title"><{$smarty.const._LB_BOOKING}></h1>
            <form action="<{$smarty.server.REQUEST_URI}>" enctype='multipart/form-data' method="post" name="user_form">
				<div  style="padding-right: 20px;" align="right"><span class="powermail_mandatory">*</span> 
					<{$smarty.const._LB_REQUIRE_INFORMATION|utf8_escape_html}></td>
				</div>
				<div id="tabs">
					<ul>
						<li><a href="#tabs-1">Select Services</a></li>
						<li><a href="#tabs-2">Booking Date</a></li>
					</ul>
					<div id="tabs-1">
						<table width="100%">
							<tr >
								<td colspan="2"  >
									<select id="SERVICE" name="SERVICE[]" multiple="10" size="15" onchange="selectService()">
									<{if $sData|count > 0 }>
									<{foreach from=$sData key=gID item=data}>
										<{assign var=gTitle value=$data.TITLE}>
										<{assign var=sDATA value=$data.DATA}>
										<{if $sDATA|count > 0 }>
											<optgroup label="<{$gTitle|utf8_escape_html}>">
											<{foreach from=$sDATA key=ID item=item}>
											<option value="<{$item.ID|utf8_escape_html}>" <{if is_array($selectedService) && in_array($item.ID,$selectedService)}>selected="selected"<{elseif $bsID == $item.ID}>selected="selected"<{/if}>><{$item.TITLE|utf8_escape_html}> ( <{$item.TIME|utf8_escape_html}> mins - $<{$item.PRICE|utf8_escape_html}> )</option>
											<{/foreach}>
										</optgroup>
										<{/if}>
									<{/foreach}>
									<{/if}>
									</select>
								</td>
							</tr>
							<tr>
								<td colspan="2" style="text-align: center;"><input class="btn" value="Next" id="btnSelectedService" type="button"/></td>
							</tr>
						</table>
					</div>
					<div id="tabs-2">
						<table width="100%">
							<tr style="border-bottom: 1px #911F7E solid;">
								<td width="150">Selected Service : </td>
								<td ><div id="selectedService"></div></td>
							</tr>
						</table>
						<table width="100%">
							<tr >
								<td colspan="2" style="height: 10px;"></td>
							</tr>
							<tr>
								<td ><div id="datepicker"></div><input  type="hidden" class="date" name="DATE" id="DATE" value="" onchange="getWorkingHour()" size="15" /></td>
								<td>
									<div id="dTIME"></div>
								</td>
							</tr>
							<tr>
								<td colspan="2" style="text-align: center;">
									<input class="btn" value="<{$smarty.const._LB_BACK}>" id="btnBackService" type="button"/>
									<input class="btn" value="<{$smarty.const._LB_VALIDATE}>" id="btnSubmit" onclick="validate()" type="button"/>
								</td>
							</tr>
						</table>
					</div>
				</div>
            <input type="hidden" id="act" name="act" value="<{$smarty.const.ACT_VALID_EDIT}>"/>
            <table width="100%" >
                
            </table>
           </form>
        </div>
        <div class="sidebar">
            <{include file="right_business_hours.html"}>
			<{include file="right_service.html"}>
        </div><!--End .sidebar-->
    </div>
</div>

<{include file="footer.html"}>